import React, { useState, useEffect } from 'react';
import './index.css';
import {Image} from "antd";



function AliyunCdn(props) {

	const {  } = props;

	return (
		<div id='aliyun-cdn' className='section'>
			<p className='mark'>为提高用户体验进而留住用户,可酌情开通CDN加速服务。没有CDN服务,页面打开会非常慢</p>
			<p className='mark'>阿里云CDN依赖SSL数字证书,因此需先开通SSL证书</p>
			<div id='aliyun-cdn-purchase' className='operate-section'>
				<h4>【数字证书】 点击进入<a href="https://yundun.console.aliyun.com/?p=cas" target='_blank'>阿里云数字证书控制台</a>(https://yundun.console.aliyun.com/?p=cas)</h4>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/ssl_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/ssl_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/ssl_3.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/ssl_4.png' /></div>
			</div>
			<div id='aliyun-cdn-purchase' className='operate-section'>
				<h4>【CDN注册】 打开<a href="https://www.aliyun.com/product/cdn" target='_blank'>阿里云CDN</a>(https://www.aliyun.com/product/cdn)</h4>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_3.png' /></div>
				<h4>第二步 打开<a href="https://cdn.console.aliyun.com/overview" target='_blank'>阿里云CDN控制台</a>(https://cdn.console.aliyun.com/overview)</h4>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_4.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_6.png' /></div>
				<p className='mark'>提前给域名添加DNS解析  txt 类型</p>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_5.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_7.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_8.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_9.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_10.png' /></div>
				<h4>【添加域名CNAME解析记录】 打开<a href="https://wanwang.aliyun.com/domain" target='_blank'>阿里云万网域名控制台</a>(https://wanwang.aliyun.com/domain)</h4>
				<p className='mark'>如果您是自己购买的独立域名,可以直接去域名控制台操作;如果是毛毛虫商城提供的共享域名,则将CNAME值复制之后发送给毛毛虫商城的客户经理或技术人员</p>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_11.png' /></div>
				<h4>回到阿里云CDN控制台,修改缓存配置、回源协议等信息</h4>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_12.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_13.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_15.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_14.png' /></div>
				<h4>回到阿里云数字证书控制台,将0元购买的SSL证书部署给CDN添加的域名</h4>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/ssl_5.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/ssl_6.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/ssl_7.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/ssl_8.png' /></div>
				<h4>刷新图片cdn</h4>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn_16.png' /></div>
			</div>
			<div id='aliyun-cdn-setting' className='param-section'>
				<h3>【CDN配置】</h3>
				<div className='image-wrapper'><Image src='./images/aliyuncdn/aliyuncdn-params_1.png' /></div>
			</div>

		</div>
	);
}

export default AliyunCdn;
